<template>
  <el-container>
    <el-main>
      <el-dialog
        :title="projectDetailData.name"
        :visible.sync="projectDetailVisiable"
        width="100%"
        style="height: 100%"
        @close="handleProjectDetailDialogClose"
      >
        <span>
          <span style="font-weight: 700">no：{{ projectDetailData.no }}</span>
          <div class="mask">
            <el-row :gutter="30">
              <el-col :span="8" :offset="0">
                <el-card>
                  <div class="sliderMask">
                    <div class="sliderContent">
                      <div>
                        立项机构:
                        <span>{{ projectDetailData.initiation_agency }}</span>
                      </div>
                      <div>
                        立项时间:
                        <span>{{ projectDetailData.initial_time }}</span>
                      </div>
                      <div>
                        结题时间:
                        <span>{{ projectDetailData.closing_time }}</span>
                      </div>
                      <div>
                        下达单位:
                        <span>{{ projectDetailData.release_unit }}</span>
                      </div>
                      <div>
                        开始时间:
                        <span>{{ projectDetailData.start_time }}</span>
                      </div>
                      <div>
                        结束时间:
                        <span>{{ projectDetailData.end_time }}</span>
                      </div>
                      <div>
                        学科分类：
                        <span>{{
                          projectDetailData.subject_classification
                        }}</span>
                      </div>
                      <div>
                        审核状态:
                        <span>
                          <span v-if="projectDetailData.status == 1"
                            >已审核</span
                          >
                          <span v-else-if="projectDetailData.status == 0"
                            >未审核</span
                          ></span
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="16" :offset="0">
                <el-card width="90%">
                  <div class="contentMask">
                    <div>
                      <h3>摘要</h3>
                      <p>{{ projectDetailData.abstract }}</p>
                    </div>

                    <div>
                      项目分类：
                      <span>{{ projectDetailData.category }}</span>
                    </div>
                    <div>
                      预算：
                      <span>{{ projectDetailData.budget }}</span>
                    </div>
                    <div>
                      附件：
                      <el-link
                        type="primary"
                        :underline="false"
                        :href="`http://localhost:3000/${projectDetailData.projectfile}`"
                        target="_blank"
                      >
                        <span class="file">{{
                          this.projectfileArr[this.projectfileArr.length - 1]
                        }}</span>
                      </el-link>
                    </div>
                  </div>
                </el-card>
                <el-card width="90%">
                  <div class="footMask">
                    <div>
                      主持人:
                      <span>{{ projectDetailData.commander }}</span>
                    </div>
                    <div>
                      参与者:
                      <span>{{ projectDetailData.participant }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "myProjectDetail",
  data() {
    return {
      projectDetailVisiable: false,
      projectDetailData: "",
      projectfileArr: "",
    };
  },
  methods: {
    handleProjectDetailDialogClose() {},
    handleProjectDetailDialogConfirm() {},
    projectDetailShow(data) {
      console.log(data);
      this.projectDetailVisiable = true;
      this.projectDetailData = data;
      this.projectfileArr = this.projectDetailData.projectfile.split("/");
    },
  },
  mounted() {
    this.$bus.$on("handleProjectDetailShow", this.projectDetailShow);
  },
  beforeDestroy() {
    this.$bus.$off("handleProjectDetailShow");
  },
};
</script>

<style lang="less" scoped >
// 样式设计
/deep/.el-row {
  margin-right: 0px !important;
}

/deep/.el-dialog__body {
  box-sizing: border-box;
  padding: 30px 20px;
  padding-top: 0px;
}
// 关闭图表
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: black;
  font-size: 24px;
}
/deep/.el-dialog {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.mask {
  overflow: hidden;
  width: 100%;
  height: 0vh;
  animation: maskAni 1s forwards;
  transition: all 1s;
}
@keyframes maskAni {
  100% {
    height: 84vh;
  }
}
//
.sliderMask {
  height: 78vh;
}
// slider
.sliderContent {
  // display: flex;
  // flex-direction: column;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
.contentMask {
  height: 60vh;
  div {
    font-size: 16px;
    p {
      text-indent: 2em;
      margin-bottom: 20px;
    }
    margin-bottom: 10px;
  }
  .file {
    color: red;
    cursor: pointer;
  }
}
.footMask {
  height: 12.5vh;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
</style>